import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import Button from '../../component/Button';
import { Page } from '../../constant/Page';
import { ThemeContext } from '../../context/ThemeContext';
import IcDownloadApp from '../../image/download-app.png';
import IcHero from '../../image/hero-g.png';
import Bar from './component/Bar';
import Footer from './component/Footer';
import style from './LandingAsk.module.scss';
import { RootState } from '../../redux/store';
import { useDispatch, useSelector } from 'react-redux';
const LandingAsk = () => {
  const navigate = useNavigate();
  const { FeatureSecure, FeaturePrivate, FeatureReserves } = useContext(ThemeContext).image;

  const { auth: { isLogin }, basedata: { baseDataInfo } } = useSelector((state: RootState) => state);

  return (
    <div className={style.self}>
      <Bar />
      <div className={style.content}>
        <div className={style.titleBlock}>
          <div className={style.titleHead} >
            虚拟货币 OTC 交易所
          </div>
          <div className={style.titleDesc}>
            提供你具隐私的便利交易
          </div>
          <div className={style.buttonBlock}>
            <Button
              className={style.startButton}
              size="large"
              onClick={() => (isLogin ? navigate(Page.Trade) : navigate(Page.SignIn))}
            >
              开始使用
            </Button>
          </div>
          <div className={style.titleImage}>
            <img src={IcHero} />
          </div>
        </div>
        <div className={style.featureBlock}>
          <div className={style.featureItem}>
            <img src={FeatureSecure} />
            <div className={style.featureHead}>安全</div>
            <p className={style.featureDesc}>透过双重验证、冷钱包与多签机制，我们的安全团队提供全方位的安全保障</p>
          </div>
          <div className={style.featureItem}>
            <img src={FeaturePrivate} />
            <div className={style.featureHead}>隐私</div>
            <p className={style.featureDesc}>仅有通过实名认证的用户能够进行交易，我们的团队与系统为您的交易与资料的安全把关</p>
          </div>
          <div className={style.featureItem}>
            <img src={FeatureReserves} />
            <div className={style.featureHead}>100% 储备</div>
            <p className={style.featureDesc}>你所有的数位资产将被 100% 储备，不会被挪作它用。你所有的提款都能被及时处理。</p>
          </div>
        </div>
        <div className={style.appBlock}>
          <div className={style.appHead}>下载 Bitotc APP</div>
          <div className={style.appDesc}>随时对地使用 Bitotc App 进行即时交易.</div>
          <Button
            className={style.downloadButton}
            appearance="text"
            onClick={() => {
              window.open(baseDataInfo?.FiOSUrl)
            }}
          >
            下载 iOS App
          </Button>
          <Button
            className={style.downloadButton}
            appearance="text"
            onClick={() => {
              window.open(baseDataInfo?.FAndroidUrl)
            }}
          >
            下载 Android App
          </Button>
          <Button
            className={style.downloadButton}
            appearance="text"
            onClick={() => (window.open(
              'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2',
            ))}
          >
            下载 谷歌验证器 App
          </Button>
          <img className={style.appImage} src={IcDownloadApp} />
        </div>
        <Footer />
      </div>
    </div >
  );
};

export default LandingAsk;
